<template>
  <view class="group-setting">
    <view class="group-list">
      <view
          v-for="item in groupList"
          :key="item.key"
          class="group-item"
          @click="toGroupDetail(item)"
          @longpress="openMoreAction(item)">
        <view class="group-name-box">
          <view class="group-name">{{ item.name }}</view>
          <view class="lamp-count">
            <text class="iconfont icon-lamp" />
            <text class="count">{{ item.lampCount }}</text>
          </view>
        </view>
        <view v-if="item.sceneName" class="group-scene">
          <view class="label">使用场景</view>
          <view class="name">{{ item.sceneName }}</view>
        </view>
      </view>
    </view>
    <view v-if="projectInfo.canEdit" class="page-bottom-btn" @click="addGroup()">新增分组</view>
    <uni-popup ref="popup" type="bottom">
      <view class="popup-btn" @click="editGroup()">编辑分组</view>
      <view class="popup-btn delete-btn" @click="deleteGroup()">删除分组</view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'group-setting',
  props: {
    projectInfo: {
      type: Object
    }
  },
  data() {
    return {
      groupList: [],
      targetGroup: null
    }
  },
  methods: {
    initData() {
      if (this.projectInfo?.id) {
        this.getProjectGroup()
      }
    },
    getProjectGroup() {
      const self = this
      uni.request({
        url: '/project_group/list',
        data: {
          xm_id: this.projectInfo.id
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach(item => {
              const groupItem = {
                key: item.id,
                id: item.id,
                name: item.name || '',
                areaName: item.area_name || '',
                sceneName: item.scene_name || '',
                lamps: [],
                lampCount: Math.floor(item.node_cnt) || 0,
              }
              try {
                const nodes = JSON.parse(item.nodes)
                if (Array.isArray(nodes)) {
                  groupItem.lamps = nodes
                }
              } catch (e) {
                console.log(e)
              }
              arr.push(groupItem)
            })
            self.groupList = arr
          }
        },
        complete() {
          uni.stopPullDownRefresh()
        }
      })
    },
    addGroup() {
      if (!this.projectInfo.canEdit) return
      uni.navigateTo({
        url: `/pages/settings/add-group/add-group?projectId=${this.projectInfo.id}&gatewayId=${this.projectInfo.gateway_id}&canEdit=${this.projectInfo.canEdit}`
      })
    },
    editGroup() {
      const self = this
      if (!self.targetGroup) return
      this.$refs.popup.close()
      uni.navigateTo({
        url: `/pages/settings/add-group/add-group?projectId=${self.projectInfo.id}&gatewayId=${self.projectInfo.gateway_id}&canEdit=${self.projectInfo.canEdit}&groupId=${self.targetGroup.id}`
      })
    },
    toGroupDetail(targetGroup) {
      uni.navigateTo({
        url: `/pages/settings/group-detail/group-detail?projectId=${this.projectInfo.id}&gatewayId=${this.projectInfo.gateway_id}&canEdit=${this.projectInfo.canEdit}&groupId=${targetGroup.id}`
      })
    },
    openMoreAction(targetGroup) {
      if (!this.projectInfo.canEdit) return
      this.targetGroup = targetGroup
      this.$refs.popup.open()
    },
    deleteGroup() {
      const self = this
      if (!self.targetGroup) return
      this.$refs.popup.close()
      uni.request({
        url: '/project_group/del',
        data: {
          id: self.targetGroup.id
        },
        success(result) {
          if (result.data.success) {
            self.getProjectGroup()
            uni.showToast({
              icon: 'success',
              title: '删除成功'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.group-item {
  background-color: $white;
  border-radius: 10rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
}
.group-name-box {
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group-name {
  font-size: $font-size-4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 500rpx;
}
.group-scene {
  height: 100rpx;
  border-top: 2rpx solid $border-base;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: $font-size-4;
  .name {
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 400rpx;
  }
}

.disabled-select {
  position: absolute;
  display: block;
  z-index: 9999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, .4);
}
.lamp-count {
  color: $success;
  font-size: $font-size-4;
  .count {
    margin-left: 10rpx;
  }
}
.popup-btn {
  background-color: $primary;
  color: $white;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: $font-size-4;
}
.delete-btn {
  background-color: $danger;
}
</style>
